/** Loading */
.jloading {
    position:fixed;
    z-index:10001;
    width:100%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color: rgba(0,0,0,0.7);
}

.jloading::after {
    content:'';
    display:block;
    margin:0 auto;
    margin-top:50vh;
    width:40px;
    height:40px;
    border-style:solid;
    border-color:white;
    border-top-color:transparent;
    border-width:4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

.jloading.spin {
    background-color:transparent;
}

.jloading.spin::after {
    margin:0 auto;
    margin-top:80px;
    border-color:#aaa;
    border-top-color:transparent;
}

/** Animations **/
.fade-in {
    animation: fade-in 2s forwards;
}

.fade-out {
    animation: fade-out 1s forwards;
}

.slide-left-in {
    position: relative;
    animation: slide-left-in 0.4s forwards;
}

.slide-left-out {
    position: relative;
    animation: slide-left-out 0.4s forwards;
}

.slide-right-in {
    position: relative;
    animation: slide-right-in 0.4s forwards;
}

.slide-right-out {
    position: relative;
    animation: slide-right-out 0.4s forwards;
}

.slide-top-in {
    position: relative;
    animation: slide-top-in 0.4s forwards;
}

.slide-top-out {
    position: relative;
    animation: slide-top-out 0.2s forwards;
}

.slide-bottom-in {
    position: relative;
    animation: slide-bottom-in 0.4s forwards;
}

.slide-bottom-out {
    position: relative;
    animation: slide-bottom-out 0.1s forwards;
}

.slide-left-in > div {
    -webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0,0,0);
}

.slide-left-out > div {
    -webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0,0,0);
}

.slide-right-in > div {
    -webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0,0,0);
}

.slide-right-out > div {
    -webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0,0,0);
}

.spin {
    animation: spin 2s infinite linear;
}

/** Fadein and Fadeout **/
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 100; }
}

@-webkit-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 100; }
}

@keyframes fade-out {
    0% { opacity: 100; }
    100% { opacity: 0; }
}

@-webkit-keyframes fade-out {
    0% { opacity: 100; }
    100% { opacity: 0; }
}

/** Keyframes Left to Right **/
@keyframes slide-left-in {
    0% { left: -100%; }
    100% { left: 0%; }
}

@-webkit-keyframes slide-left-in {
    0% { left: -100%; }
    100% { left: 0%; }
}
    
@keyframes slide-left-out {
    0% { left: 0%; }
    100% { left: -100%; }
}

@-webkit-keyframes slide-left-out {
    0% { left: 0%; }
    100% { left: -100%; }
}

/** Keyframes Right to Left **/
@keyframes slide-right-in {
    0% { left: 100%; }
    100% { left: 0%; }
}

@-webkit-keyframes slide-right-in
{
    0% { left: 100%; }
    100% { left: 0%; }
}
    
@keyframes slide-right-out {
    0% { left: 0%; }
    100% { left: 100%; }
}

@-webkit-keyframes slide-right-out {
    0% { left: 0%; }
    100% { left: 100%; }
}

/** Keyframes Top to Bottom **/
@keyframes slide-top-in {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0%); }
}

@-webkit-keyframes slide-top-in {
    0% { transform: translateY(-100%); }
    100% { -webkit-transform: translateY(0%); }
}
    
@keyframes slide-top-out {
    0% { transform: translateY(0%); }
    100% { transform: translateY(-100%); }
}

@-webkit-keyframes slide-top-out {
    0% { -webkit-transform: translateY(0%); }
    100% { -webkit-transform: translateY(-100%); }
}

/** Keyframes Bottom to Top **/
@keyframes slide-bottom-in {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0%); }
}

@-webkit-keyframes slide-bottom-in {
    0% { transform: translateY(100%); }
    100% { -webkit-transform: translateY(0%); }
}
    
@keyframes slide-bottom-out {
    0% { transform: translateY(0%); }
    100% { transform: translateY(100%); }
}

@-webkit-keyframes slide-bottom-out {
    0% { -webkit-transform: translateY(0%); }
    100% { -webkit-transform: translateY(100%); }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(359deg);
    }
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(359deg);
    }
}